<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      window.onload = function(){
        var a = document.getElementsByTagName('input');
        for(var i = 0;i<a.length;i++){
                // alert(i);
                a[i].onclick = function(){           //只有在点击事件触发时才会显示i的值，当i定义为var时，全局通用，执行onclick时 i已经累加到3
                alert(i);                             // i此时为全局变量，所有的点击事件都会触发3，全局只有一个i在一直累加
                                                      //当 i 定义为let时，i为局部变量，用完就消失了，所以每一个a[i]点击时会有自身唯一的i值
            }                                        //全局会创建 i=0,i=1,i=2三个对象分别使用
        }
      }
        
    </script>
</head>
<body>
    <input type="button" value="aaa">
    <input type="button" value="bbb">
    <input type="button" value="ccc">
</body>
</html>